The game board was hardcoded at WIDTH_GAME = 1000px with fixed-width containers (w-[700px], w-[1200px]), making it overflow and unplayable on screens narrower than ~1000px.

Changes

Game board scaling (GameView.vue)

• Uses useWindowSize() (VueUse, already a dependency) to reactively track viewport width
• Computes boardScale = min(1, (windowWidth - 32) / WIDTH_GAME) and applies it as a CSS transform — game logic and drag-and-drop are unaffected
• Controls row and hint text track the scaled board width

const { width: windowWidth } = useWindowSize();
const boardScale = computed(() =>
  Math.min(1, (windowWidth.value - 32) / WIDTH_GAME)
);

Home page (MainView.vue)

• w-[700px] → w-full max-w-[700px] px-4
• Loading placeholder span changed from fixed w-[700px] to w-full

Modal (UiModal.vue)

• w-[1200px] h-[820px] → w-[min(90vw,1200px)] h-[min(85vh,820px)]

Layouts (game.vue, default.vue)

• h-lvh overflow-hidden → min-h-lvh overflow-x-hidden to allow vertical scrolling on small viewports

i18n

• Hardcoded Polish hint text in GameView.vue extracted to $t() with English translation added

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.